import { ElementRef, Input, Directive, Output, EventEmitter } from "@angular/core";
import { AmChartsService } from "@amcharts/amcharts3-angular";

@Directive({
    selector: '[chartSlider]'
})
export class ChartSliderDirective {
    private chart: any;
    private _chartData: any[] = [];
    private _start?: number;
    private _end?: number;

    public enableZoom: boolean = false;

    @Input() chartID: string;

    @Input() valueField: string;

    @Input() categoryField: string;

    @Input() set chartData(value: any[]) {
        if (value) {
            this._chartData = value;
            if (this.chart) {
                this.AmCharts.updateChart(this.chart, () => {
                    this.chart.dataProvider = this._chartData;
                });
            }
        }
    }

    @Output() changed: EventEmitter<any> = new EventEmitter();

    constructor(private el: ElementRef, private AmCharts: AmChartsService) { }

    ngOnInit() {
        setTimeout(() => {
            this.chart = this.AmCharts.makeChart(this.chartID, {
                type: "serial",
                columnWidth: 0.6,
                dataProvider: this._chartData,
                categoryField: this.categoryField,
                mouseWheelZoomEnabled: true,
                // pathToImages: '../../../../assets/img/charts/',
                graphs: [{
                    id: "g1",
                    type: "column",
                    lineColor: "#1D6094",
                    fillAlphas: 0.8,
                    valueField: this.valueField
                }],
                chartScrollbar: {
                    /*
                    graph: "g1",
                    */
                    scrollbarHeight: 10,
                    dragIcon: 'dragIconRoundBig'
                },
                balloon: {
                    enabled: false
                },
                categoryAxis: {
                    axisColor: "#DADADA",
                    dashLength: 1,
                    labelsEnabled: false
                },
                valueAxes: [{
                    axisAlpha: 0.2,
                    dashLength: 1,
                    position: "left"
                }],
                listeners: [{
                    event: 'rendered',
                    method: (e) => {
                        this.zoom(e.chart);
                    }
                }, {
                    event: 'zoomed',
                    method: (e) => {
                        if (this.enableZoom == true)
                            this.changed.emit({ start: e.startValue, end: e.endValue });
                    }
                }]
            });
        });
    }

    private zoom(chart: any) {
        if (this._chartData.length > 0 && this._start != undefined && this._end != undefined) {
            let zoom = this._chartData ? [this._chartData.findIndex(x => x.xAxisValue >= this._start), this._chartData.findIndex(x => x.xAxisValue >= this._end)] : [0, 0];
            chart.zoomToIndexes(zoom[0], zoom[1]);
            this.enableZoom = true;
        }
    }

    public setZoom(start: number, end: number) {
        this.enableZoom = false;
        this._start = start;
        this._end = end;
        this.zoom(this.chart);
    }
}